<template>
  <div class="ff-regular">
    <Modal v-model="exceptionPop" width="30" :closable="false" :mask-closable="false"
      class-name="vertical-center-modal">
      <div slot="header" class="head-sty">
        <div class="title ff-bold"><img src="@/assets/images/pay/warning.png" class="icon" alt="">{{ $t('pay.err_tit_txt') }}
        </div>
      </div>
      <div class="content-sty">
        <div class="text">
          {{ $t('pay.err_txt_before') }}
          <span class="sep-txt">{{ $t('pay.area_txt_sep') }}</span>{{ $t('pay.after_txt_err') }}
        </div>
        <div class="gray-txt">{{ $t('pay.tit_err_area') }}</div>
        <div class="list-sty" v-for="(item, index) in areaArr" :key="index">
          <span class="imp-icon">* </span>{{ item.areaName }}
        </div>
        <div class="bot-txt">
          {{ $t('pay.tip_content_sub_txt', { klarnaCountry: klarnaCountry }) }}
          <span class="fw-txt ff-bold">{{ $t('pay.ok_txt') }}</span>
          {{ $t('pay.currency_sub_txt_btn', { klarnaCode: klarnaCode }) }}
        </div>
      </div>
      <div slot="footer" class="handle-sty">
        <Button class="cancel-btn ff-bold" @click="closeMet()">{{ $t('pay.cancel') }}</Button>
        <Button type="primary" class="save-btn ff-bold" @click="confirmMet()">{{ $t('pay.ok_txt1') }}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    klarnaCountry: {
      type: String,
      default: ''
    },
    klarnaCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      exceptionPop: false,
      areaArr: [
        { areaName: this.$t('pay.area_txt1') },
        { areaName: this.$t('pay.area_txt2') },
        { areaName: this.$t('pay.area_txt3') },
        { areaName: this.$t('pay.area_txt4') },
        { areaName: this.$t('pay.area_txt5') },
      ]
    }
  },
  methods: {
    open() {
      this.exceptionPop = true;
    },
    closeMet() {
      this.exceptionPop = false;
    },
    confirmMet() {
      this.exceptionPop = false;
      this.$emit('yesMet');
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 32px 32px 20px 32px;
  }

  .ivu-modal-body {
    padding: 0 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 12px 32px 32px 32px;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
      display: inline-flex;
      align-items: center;

      .icon {
        width: 28px;
        height: 28px;
        margin-right: 5px;
      }
    }
  }

  .content-sty {
    .text {
      font-weight: 500;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;

      .sep-txt {
        color: #FF186B;
      }
    }

    .gray-txt {
      font-weight: 500;
      font-size: 16px;
      color: #767B93;
      line-height: 19px;
      margin-top: 24px;
    }

    .list-sty {
      font-weight: 500;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      margin-top: 16px;

      .imp-icon {
        color: #FF186B;
      }
    }

    .bot-txt {
      font-weight: 500;
      font-size: 14px;
      color: #767B93;
      line-height: 16px;
      margin-top: 32px;

      .fw-txt {
        font-size: 15px;
        color: #1E1714;
        line-height: 21px;
        font-weight: 600;
      }
    }
  }

  .handle-sty {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 24px;

    .save-btn {
      min-width: 112px;
      height: 46px;
      background-color: #1E1714;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      border-radius: 8px;
      border: none;
    }

    .cancel-btn {
      min-width: 112px;
      height: 46px;
      font-weight: 600;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      border-radius: 8px;
    }

    .cancel-btn:hover {
      border-color: #e3e5e8;
    }

    .cancel-btn:focus {
      box-shadow: 0 0 0 1px #e3e5e846;
    }
  }
}
</style>
